<template>
  <PageBox :data="dataInfo" @searchBtn="getTbody" :maring="maring" :isRadio="isRadio" :isCheckbox="isCheckbox" @tableCheckboxBtn="tableCheckboxBtn" @tableRadioBtn="tableRadioBtn">
    <template #search="{ search }">
      <ElFormItemBox label="单据状态" prop="outStockState">
        <ElSelectBox
          :data="search"
          dataName="outStockState"
          :all="{
            label: '全部',
            value: -1,
          }"
          :options="options.state" />
      </ElFormItemBox>
      <!-- <ElFormItemBox label="开单时间">
        <ElDaysBox :data="search" :dataName="['beginTime', 'endTime']" />
      </ElFormItemBox> -->
    </template>
    <template #headR> </template>
    <template #outStockState="{ row }">
      <el-tag type="danger" effect="dark" v-if="row.outStockTypeName === '红冲出库'">被红冲</el-tag>
      <ElTagBox :data="row.outStockState" :options="options.state" v-else />
    </template>
    <template #select_associationBillNo="{ row }">
      <PopoverTabel
        :title="row.associationBillNo"
        :width="1000"
        :thead="[
          {
            label: '规格编号',
            prop: 'specificationCode',
            align: 'center',
            width: 120,
          },
          {
            label: '物料名称',
            prop: 'goodsName',
            align: 'left',
            width: 160,
          },
          {
            label: '规格型号',
            prop: 'specificationName',
            align: 'left',
            width: 100,
          },
          {
            label: '供应商',
            prop: 'supplierName',
            align: 'left',
            width: 200,
          },
          {
            label: '物料类型',
            prop: 'goodsType',
            align: 'center',
            width: 100,
          },
          {
            label: '使用单位',
            prop: 'goodsUnit',
            align: 'center',
            width: 100,
          },
          {
            label: '出库数量',
            prop: 'inStockQuantity',
            align: 'center',
            width: 100,
          },
          {
            label: '备注',
            prop: 'inStockRemark',
            align: 'left',
            width: null,
          },
        ]"
        @show="
          (table: any) => {
            switch (row.billTypeName) {
              case '发料出库':
                proxy.$api.ProductionBusniess.GetMatchPageProduceMaterialBills({
                  pageIndex: 1,
                  pageSize: 1,
                  totalCount: 1,
                  queryDataBaseFiled: 'getMaterialBillNo',
                  likeWords: row.associationBillNo,
                  isShowDisabled: -1,
                  orderByType: 0,
                  getMaterialType: 0,
                  getMaterialBillState: -1,
                  outStockState: -1,
                })
                  .then((res: any) => {
                    table.tbody =
                      res.list[0]?.getProduceMaterialMxList?.map((el: any) => ({
                        specificationCode: el.specificationCode, //规格编号
                        goodsName: el.goodsName, //物料名称
                        specificationName: el.specificationName, //规格型号
                        supplierName: el.supplierName, //供应商
                        goodsType: el.goodsCategoryName, //物料类型
                        goodsUnit: el.goodsUnitName, //使用单位
                        inStockQuantity: el.applyGetQuantity, //出库数量
                        inStockRemark: el.getMaterialRemark, //备注
                      })) || [];
                    table.loading = false;
                  })
                  .catch(() => {
                    table.tbody = [];
                    table.loading = false;
                  });
                break;
              case '退货出库':
                proxy.$api.StockGoodsCredit.GetMatchPageStockGoodsCredits({
                  pageIndex: 1,
                  pageSize: 1,
                  totalCount: 1,
                  queryDataBaseFiled: 'creditBillNo',
                  likeWords: row.associationBillNo,
                  onlySelf: 0,
                  isShowDisabled: -1,
                  orderByType: 0,
                  creditState: -1,
                })
                  .then((res: any) => {
                    table.tbody =
                      res.list[0]?.detailList?.map((el: any) => ({
                        specificationCode: el.specificationCode, //规格编号
                        goodsName: el.goodsName, //物料名称
                        specificationName: el.specificationName, //规格型号
                        supplierName: el.supplierName, //供应商
                        goodsType: el.categoryName, //物料类型
                        goodsUnit: el.goodsUnitName, //使用单位
                        inStockQuantity: el.creditQuantity, //入库数量
                        inStockRemark: el.creditDetailRemark, //备注
                      })) || [];
                    table.loading = false;
                  })
                  .catch(() => {
                    table.tbody = [];
                    table.loading = false;
                  });
                break;
              default:
                proxy.$message('该单据未设置', 'error');
                table.tbody = [];
                table.loading = false;
                break;
            }
          }
        " />
    </template>
    <template #outStockBillNo="{ row }">
      <PopoverTabel
        :title="row.outStockBillNo"
        :width="1000"
        :thead="[
          {
            label: '规格编号',
            prop: 'specificationCode',
            align: 'center',
            width: 120,
          },
          {
            label: '物料名称',
            prop: 'goodsName',
            align: 'left',
            width: 160,
          },
          {
            label: '规格型号',
            prop: 'specificationName',
            align: 'left',
            width: 100,
          },
          {
            label: '供应商',
            prop: 'supplierName',
            align: 'left',
            width: 200,
          },
          {
            label: '物料类型',
            prop: 'categoryName',
            align: 'center',
            width: 100,
          },
          {
            label: '使用单位',
            prop: 'goodsUnitName',
            align: 'center',
            width: 100,
          },
          {
            label: '批次编号',
            prop: 'productionBatchNumber',
            align: 'center',
            width: 100,
          },
          {
            label: '生产日期',
            prop: 'productionDate',
            align: 'center',
            width: 100,
          },
          {
            label: '库区库位',
            prop: 'storageAreaInfo',
            align: 'center',
            width: 140,
          },
          {
            label: '出库数量',
            prop: 'outStockQuantity',
            align: 'center',
            width: 100,
          },
          {
            label: '备注',
            prop: 'outStockRemark',
            align: 'left',
            width: null,
          },
        ]"
        :tbody="row.detailList">
        <template #storageAreaInfo="{ row }">
          {{ `${row.warehouseAreaName}-${row.areaShelfName}` }}
        </template>
      </PopoverTabel>
    </template>
  </PageBox>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter();
const { proxy } = getCurrentInstance() as any;
import './pageCss.scss'; // 引入样式
import { useListComponent } from './pageTs'; // 引入逻辑
const props = withDefaults(
  defineProps<{
    isRadio?: boolean; //单选
    isCheckbox?: boolean; //多选
    maring?: number; //多选
  }>(),
  {},
);

const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'tableRadioBtn', row: any): void;
  (event: 'tableCheckboxBtn', arr: any): void;
}>();
//多选数据
const tableCheckboxBtn = (arr: any) => {
  emit('tableCheckboxBtn', arr);
};
//单选数据
const tableRadioBtn = (row: any) => {
  emit('tableRadioBtn', row);
};
// 组件挂载后执行
onMounted(() => {
  getTbody();
});
const { dataInfo, getTbody, options } = useListComponent({
  ...props,
});
</script>
